<template>
	<view class="display uv-flex-column">
		<view class="hd">
			<uv-text :text="cont.name" color="#fff" size="30px" align="center" margin="10px 0 60px"></uv-text>
		</view>
		<view class="bd uv-flex-column hidden-scrollbar">
			<template v-for="(item,index) in typing.content" :key="index">
				<view class="item" v-if="index == typing.current || (progress>=100 && index == typing.current-1)">
					<view class="words uv-flex-row">
						<view class="words-item" :class="[
							{'cursor': index== typing.current&& typing.letterCurrent == index2},
							kClassName(index,index2)
						]" v-for="(item2,index2) in item.typing" :key="index">{{item2}}</view>
					</view>
					<view class="desc">
						<view class="pronounce">{{seting.pronounce=='us'?'英式：':'美式：'}}{{item[seting.pronounce].pronounce}}</view>
						<view class="caption">{{item.caption}}</view>
					</view>
				</view>
			</template>
		</view>
		<view class="real-time">
			<real-time :typing="typing" :successRate="successRate" :percentage="progress" />
		</view>
	</view>
	<view class="progress">
		<progress-line :percentage="progress" @end="courseComplete(completePopup)" />
	</view>
	<popup-complete ref="completePopup" />
</template>
<script setup>
	import { watch, defineComponent, ref } from 'vue';
	import { keyboardList } from '@/common/js/keyboard.js';
	import useTyping from '../hooks/useTypingENWORD.js';
	import realTime from './real-time.vue';
	import progressLine from './progress-line.vue';
	import popupComplete from './popup-complete.vue';
	defineComponent({ progressLine, realTime, popupComplete });
	const completePopup = ref(null);
	const props = defineProps({
		cont: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const { seting, typing, inputChange, recordInputText, successRate, progress, kClassName, courseComplete } = useTyping(() => {
		return props.cont;
	})
</script>
<style scoped lang="scss">
	@import '../common/style.scss';
	.bd {
		position: relative;
		width: 600px;
		height: 360px;
		overflow-x: hidden;
		overflow-y: auto;
		margin: 0 auto;
		.words {
			justify-content: center;
			padding-bottom: 50px;
			border-bottom: 2px solid rgba(127, 133, 150, 0.15);
			&-item {
				flex-shrink: 0;
				width: 45px;
				margin-right: 4px;
				text-align: center;
				font-size: 75px;
				color: rgb(127, 133, 150);
				border-bottom: 6px solid rgb(127, 133, 150);
				&.cursor {
					color: rgb(249, 250, 252);
				}
				&.success {
					color: rgb(48, 178, 140);
					border-bottom: none;
				}
				&.error {
					color: rgb(229, 79, 74);
					border-bottom: none;
				}
				&.warn {
					color: rgb(253, 194, 79);
					border-bottom: none;
				}
			}
		}
		.desc {
			padding: 20px;
			text-align: center;
			.pronounce {
				text-align: center;
				color: rgb(127, 133, 150);
				font-size: 16px;
				font-weight: 500;
				line-height: 20px;
				margin-bottom: 18px;
			}
			.caption {
				color: rgb(127, 133, 150);
				font-size: 24px;
				font-weight: 400;
				line-height: 34px;
				white-space: pre-wrap;
				text-align: center;
			}
		}
	}
</style>